@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* 定义主题变量 */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    /* 浅色主题默认颜色 */
    --color-background: #ffffff;
    --color-foreground: #0a0a0a;
    --color-card: #f8f9fa;
    --color-card-foreground: #0a0a0a;
    --color-primary: #3b82f6;
    --color-primary-foreground: #ffffff;
    --color-secondary: #e5e7eb;
    --color-secondary-foreground: #0a0a0a;
    --color-muted: #f3f4f6;
    --color-muted-foreground: #6b7280;
    --color-accent: #f3f4f6;
    --color-accent-foreground: #0a0a0a;
    --color-border: #e5e7eb;
    --color-input: #e5e7eb;
    --color-ring: #3b82f6;

    /* Typography 专用颜色变量 */
    --prose-body: #374151;
    --prose-headings: #111827;
    --prose-lead: #4b5563;
    --prose-links: #3b82f6;
    --prose-bold: #111827;
    --prose-counters: #6b7280;
    --prose-bullets: #9ca3af;
    --prose-hr: #e5e7eb;
    --prose-quotes: #111827;
    --prose-quote-borders: #e5e7eb;
    --prose-captions: #6b7280;
    --prose-code: #111827;
    --prose-code-bg: #f3f4f6;
    --prose-pre-code: #e5e7eb;
    --prose-pre-bg: #1f2937;
    --prose-th-borders: #d1d5db;
    --prose-td-borders: #e5e7eb;
}

/* 深色主题覆盖 */
@layer theme {
    .dark {
        --color-background: #0a0a0a;
        --color-foreground: #fafafa;
        --color-card: #1a1a1a;
        --color-card-foreground: #fafafa;
        --color-primary: #60a5fa;
        --color-primary-foreground: #0a0a0a;
        --color-secondary: #262626;
        --color-secondary-foreground: #fafafa;
        --color-muted: #262626;
        --color-muted-foreground: #a3a3a3;
        --color-accent: #262626;
        --color-accent-foreground: #fafafa;
        --color-border: #262626;
        --color-input: #262626;
        --color-ring: #60a5fa;

        /* Typography 深色主题颜色 */
        --prose-body: #d1d5db;
        --prose-headings: #f3f4f6;
        --prose-lead: #9ca3af;
        --prose-links: #60a5fa;
        --prose-bold: #f3f4f6;
        --prose-counters: #9ca3af;
        --prose-bullets: #6b7280;
        --prose-hr: #374151;
        --prose-quotes: #e5e7eb;
        --prose-quote-borders: #374151;
        --prose-captions: #9ca3af;
        --prose-code: #f3f4f6;
        --prose-code-bg: #1f2937;
        --prose-pre-bg: #111827;
        --prose-th-borders: #4b5563;
        --prose-td-borders: #374151;
    }
}

/* 自定义 prose 样式 */
@layer utilities {
    .prose {
        --tw-prose-body: var(--prose-body);
        --tw-prose-headings: var(--prose-headings);
        --tw-prose-lead: var(--prose-lead);
        --tw-prose-links: var(--prose-links);
        --tw-prose-bold: var(--prose-bold);
        --tw-prose-counters: var(--prose-counters);
        --tw-prose-bullets: var(--prose-bullets);
        --tw-prose-hr: var(--prose-hr);
        --tw-prose-quotes: var(--prose-quotes);
        --tw-prose-quote-borders: var(--prose-quote-borders);
        --tw-prose-captions: var(--prose-captions);
        --tw-prose-code: var(--prose-code);
        --tw-prose-pre-code: var(--prose-pre-code);
        --tw-prose-pre-bg: var(--prose-pre-bg);
        --tw-prose-th-borders: var(--prose-th-borders);
        --tw-prose-td-borders: var(--prose-td-borders);
    }

    /* 代码块背景 */
    .prose :where(code):not(:where([class~="not-prose"] *)) {
        background-color: var(--prose-code-bg);
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
    }

    .prose :where(pre):not(:where([class~="not-prose"] *)) {
        background-color: var(--prose-pre-bg);
    }

    /* 链接悬停效果 */
    .prose :where(a):not(:where([class~="not-prose"] *)):hover {
        opacity: 0.8;
        text-decoration: underline;
    }

    /* 引用块样式 */
    .prose :where(blockquote):not(:where([class~="not-prose"] *)) {
        border-left-color: var(--prose-quote-borders);
        background-color: var(--color-muted);
        padding: 1rem;
        border-radius: 0.375rem;
    }
}

/* 不同尺寸的 prose 主题支持 */
@layer utilities {
    .prose-sm {
        --tw-prose-body: var(--prose-body);
        --tw-prose-headings: var(--prose-headings);
        --tw-prose-lead: var(--prose-lead);
        --tw-prose-links: var(--prose-links);
        --tw-prose-bold: var(--prose-bold);
        --tw-prose-counters: var(--prose-counters);
        --tw-prose-bullets: var(--prose-bullets);
        --tw-prose-hr: var(--prose-hr);
        --tw-prose-quotes: var(--prose-quotes);
        --tw-prose-quote-borders: var(--prose-quote-borders);
        --tw-prose-captions: var(--prose-captions);
        --tw-prose-code: var(--prose-code);
        --tw-prose-pre-code: var(--prose-pre-code);
        --tw-prose-pre-bg: var(--prose-pre-bg);
        --tw-prose-th-borders: var(--prose-th-borders);
        --tw-prose-td-borders: var(--prose-td-borders);
    }

    .prose-lg,
    .prose-xl,
    .prose-2xl {
        --tw-prose-body: var(--prose-body);
        --tw-prose-headings: var(--prose-headings);
        --tw-prose-lead: var(--prose-lead);
        --tw-prose-links: var(--prose-links);
        --tw-prose-bold: var(--prose-bold);
        --tw-prose-counters: var(--prose-counters);
        --tw-prose-bullets: var(--prose-bullets);
        --tw-prose-hr: var(--prose-hr);
        --tw-prose-quotes: var(--prose-quotes);
        --tw-prose-quote-borders: var(--prose-quote-borders);
        --tw-prose-captions: var(--prose-captions);
        --tw-prose-code: var(--prose-code);
        --tw-prose-pre-code: var(--prose-pre-code);
        --tw-prose-pre-bg: var(--prose-pre-bg);
        --tw-prose-th-borders: var(--prose-th-borders);
        --tw-prose-td-borders: var(--prose-td-borders);
    }
}

/* 基本配置 */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    background-color: #fff;
    color: #222;
}

.dark html, .dark body {
    background-color: #000 !important;
    color: #e5e7eb !important;
}

h1:focus {
    outline: none;
}

a {
    color: #0071c1;
}

.apple-link {
    color: #1890ff;
    transition: .2s !important;
    text-decoration: none;
    background: linear-gradient(#07f2, #07f2) no-repeat center bottom / 100% 0;
}

.apple-link:hover {
    color: #0066dd;
    background: linear-gradient(#07f2, #07f2) no-repeat center bottom / 100% 100%;
    border-radius: .2em;
}

:is(.apple-link,a[href*="://"],.a[target=_blank]):not(:is(.no-icon,svg a,:has(img,svg))):after {
    display: inline-block;
    margin-top: -1px;
    margin-left: 4px;
    width: 1em;
    height: 1em;
    background: currentColor;
    flex-shrink: 0;
    --icon: url("data:image/svg+xml, %3Csvg%20focusable='false'%20width='1em'%20height='1em'%20fill='currentColor'%20style='pointer-events:%20none;'%20xmlns='http://www.w3.org/2000/svg'%20class='icon'%20viewBox='0%200%201024%201024'%3E%3Cpath%20d='M574%20665.4a8.03%208.03%200%200%200-11.3%200L446.5%20781.6c-53.8%2053.8-144.6%2059.5-204%200-59.5-59.5-53.8-150.2%200-204l116.2-116.2c3.1-3.1%203.1-8.2%200-11.3l-39.8-39.8a8.03%208.03%200%200%200-11.3%200L191.4%20526.5c-84.6%2084.6-84.6%20221.5%200%20306s221.5%2084.6%20306%200l116.2-116.2c3.1-3.1%203.1-8.2%200-11.3L574%20665.4zm258.6-474c-84.6-84.6-221.5-84.6-306%200L410.3%20307.6a8.03%208.03%200%200%200%200%2011.3l39.7%2039.7c3.1%203.1%208.2%203.1%2011.3%200l116.2-116.2c53.8-53.8%20144.6-59.5%20204%200%2059.5%2059.5%2053.8%20150.2%200%20204L665.3%20562.6a8.03%208.03%200%200%200%200%2011.3l39.8%2039.8c3.1%203.1%208.2%203.1%2011.3%200l116.2-116.2c84.5-84.6%2084.5-221.5%200-306.1zM610.1%20372.3a8.03%208.03%200%200%200-11.3%200L372.3%20598.7a8.03%208.03%200%200%200%200%2011.3l39.6%2039.6c3.1%203.1%208.2%203.1%2011.3%200l226.4-226.4c3.1-3.1%203.1-8.2%200-11.3l-39.5-39.6z'%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon)
}

.apple-link:after {
    content: ""
}

.apple-link-no-icon{
    color: #1890ff;
    transition: .2s !important;
    text-decoration: none;
    background: linear-gradient(#07f2, #07f2) no-repeat center bottom / 100% 0;
}

.apple-link-no-icon:hover {
    color: #0066dd;
    background: linear-gradient(#07f2, #07f2) no-repeat center bottom / 100% 100%;
    border-radius: .2em;
}